<template>
  <div>
    <Manage>
      <template #upCard>
        <el-form label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="员工账号">
                <el-input v-model="page.employeeNumber" placeholder="请输入员工账号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="员工姓名">
                <el-input v-model="page.name" placeholder="请输入员工姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作模式">
                <!-- <el-input v-model="page.workPatternId" placeholder="请输入工作模式" /> -->
                <el-select v-model="page.workPatternId" placeholder="请输入工作模式">
                  <el-option
                    v-for="(item) in Object.keys(setMap.employeeRole)"
                    :key="item"
                    :label="setMap.employeeRole[item]"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="月份">
                <!-- <el-input v-model="page.month" placeholder="月份" /> -->
                <el-date-picker
                  v-model="page.month"
                  type="month"
                  placeholder="月份"
                  style="width:100%"
                  value-format="yyyy-MM"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属机构">
                <Treeselect
                  v-model="page.agentId"
                  :options="tree"
                  :normalizer="normalizer"
                  placeholder="请输入所属机构"
                  :append-to-body="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" size="" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #downCard>
        <div style="margin-bottom:12px">
          <el-button type="primary" @click="$router.push({path:'/transit/workArrange-setting'})">排班设置</el-button>
          <el-button class="bindPlan" @click="bindPlan">绑定排班</el-button>
        </div>
        <el-table
          :data="workData"
          stripe
          :header-cell-style="{background:'#f8faff',color:'#818693'}"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="employeeNumber" label="员工账号" width="120" fixed />
          <el-table-column prop="name" label="员工姓名" width="120" fixed />
          <el-table-column prop="phone" label="员工电话" width="120" fixed />
          <el-table-column
            prop="userType"
            label="员工角色"
            :formatter="(row)=>setMap.employeeRole[row.userType]"
            fixed
          />
          <el-table-column prop="workPatternName" label="当前工作模式" width="120" fixed />
          <el-table-column v-for="(item,index) in 28" :key="index" :label="`${item}`">
            <template #default="{row}">
              <div :class="row.workSchedules[index]?'work':'rest'">{{ row.workSchedules[index]?'上':'休' }}</div>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            :current-page="page.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </template>
    </Manage>
    <!-- 绑定排班 -->
    <el-dialog title="人工调整" :visible.sync="showBindPlan" @close="close">
      <el-form label-width="120px">
        <el-form-item>
          <el-radio-group v-model="systemRadio" @input="changeRadio">
            <el-radio label="1">礼拜制</el-radio>
            <el-radio label="2">连续制</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="模式名称">
          <el-select v-model="selectModes" style="width:80%">
            <el-option
              v-for="item in modes"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="submitModes">确认</el-button>
          <el-button @click="close">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getOrgizationTree } from '@/api/ogization'
import { editModes, getAllModes, getWorkSchedulings } from '@/api/employee'
import setMap from '@/constant/setMap'
export default {
  data() {
    return {
      setMap,
      page: {
        page: 1,
        pageSize: 10,
        employeeNumber: null,
        name: null,
        workPatternId: null,
        month: null,
        agentId: null
      },
      counts: 0,
      tree: [],
      workData: [],
      selectEmployee: [],
      showBindPlan: false,
      systemRadio: '1',
      modesAll: {},
      modes: [],
      selectModes: ''
    }
  },
  created() {
    this.initTree()
    this.initWorkData()
    this.initAllModes()
  },
  methods: {
    // 下拉树结构
    async initTree() {
      const res = await getOrgizationTree()
      this.tree = JSON.parse(res)
    },
    // 排班管理表格
    async initWorkData() {
      const res = await getWorkSchedulings(this.page)
      // console.log(res)
      this.workData = res.items
      this.counts = +res.counts
    },
    normalizer(node) {
      // 当子节点也就是children=[]时候去掉子节点
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children && node.children.length > 0 ? node.children : 0
      }
    },
    // 搜索
    search() {
      this.initWorkData()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageSize = val
      this.initWorkData()
    },
    handleCurrentChange(val) {
      this.page.page = val
      this.initWorkData()
    },
    reset() {
      this.page = {
        page: 1,
        pageSize: 10,
        employeeNumber: null,
        name: null,
        workPatternId: null,
        month: null,
        agentId: null
      }
      this.initWorkData()
    },
    // 绑定排班
    bindPlan() {
      if (!this.selectEmployee.length) return this.$message.error('请选择调整人员')
      this.showBindPlan = true
    },
    handleSelectionChange(val) {
      this.selectEmployee = val.map(item => item.id)
    },
    // 获取所有模式
    async initAllModes() {
      this.modesAll = await getAllModes()
      this.modes = this.modesAll[this.systemRadio]
    },
    // 切换单选
    changeRadio(val) {
      this.modes = this.modesAll[val]
      this.selectModes = ''
    },
    // 人工调整
    async submitModes() {
      await editModes({
        userIdList: this.selectEmployee,
        workPatternId: this.selectModes,
        workPatternType: this.systemRadio
      })
      this.$message.success('调整成功')
      this.initWorkData()
      this.close()
    },
    close() {
      this.showBindPlan = false
    }
  }

}
</script>

<style lang="scss" scoped>
.green-status::before{
    content: "";
    width: 6px;
    height: 6px;
    background: #1dc779;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.red-status::before{
    content: "";
    width: 6px;
    height: 6px;
    background: red;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.rest{
      width: 24px;
    height: 24px;
    background: #eff3f8;
    border: 1px solid #d8dde3;
    border-radius: 50%;
    text-align: center;
    color: #20232a;
    font-size: 13px;
}
.work {
      width: 24px;
    height: 24px;
    background: #ffeeeb;
    border: 1px solid #e15536;
    border-radius: 50%;
    text-align: center;
    color: #e15536;
    font-size: 13px;
}
.bindPlan{
  background: #ffeeeb;
    border-color: #f3917c;
    color: #e15536;
    &:hover{
      color: #FFFFFF;
    background-color: #e15536;
    border-color: #e15536;
    }
}
</style>
